<template>
  <view>
    <view class="tabClass">
      <view style="width: 70%">
        <uni-segmented-control
          :current="current"
          :values="items"
          :style-type="styleType"
          :active-color="activeColor"
          @clickItem="onClickItem"
        />
      </view>
      <text class="jiahaoClass" @click="handleshenqing">
        <text class="iconfont icon-jiahao" style="font-size: 40rpx"></text>
      </text>
    </view>
    <view class="overClass" v-if="computedRows.length" style="max-height: 90vh">
      <view v-for="item in computedRows" :key="item.id">
        <view class="wrapBox">
          <view class="smallBox">
            <text class="maxwidth"> 危废行业俗称:{{ item.wfTypeName }} </text>
          </view>
          <view class="smallBox">
            <text> 转运日期:{{ item.plan_TransTime }} </text>
            <text> 所属部门:{{ item.deptName }} </text>
          </view>
          <view class="smallBox">
            <text> 去向:{{ item.transTo }} </text>
            <text> 申请人:{{ item.userName }} </text>
          </view>
          <view class="smallBox" v-show="item.transStatus == 1">
            <text> 当前环节:{{ item.nextActivity }} </text>
            <text> 当前办理人:{{ item.handleUserName }} </text>
          </view>
          <!-- <view class="smallBox">
            <text> 产出量:{{ item.wfTrans_Weight }} </text>
            <text> 单位:{{ item.wfUnit }} </text>
          </view> -->
          <view class="smallBox">
            <text :style="{ color: item.transStatus == 2 ? 'red' : '' }">
              审批状态:{{ compStatus(item.transStatus) }}
            </text>
            <view style="display: flex">
              <button
                @click="handleClick(item)"
                class="commonBtnClass"
                v-if="item.transStatus == 4"
              >
                编辑
              </button>
              <button
                @click="handleRevokeOrDel(item)"
                class="commonBtnClass"
                v-if="item.transStatus == 4"
              >
                删除
              </button>
              <button
                class="commonBtnClass"
                v-if="item.transStatus == 1"
                @click.stop="handleRevokeOrDel(item)"
                style="width: 160rpx"
              >
                撤销申请
              </button>
              <button
                class="commonBtnClass"
                @click="handleClick(item)"
                v-if="
                  item.transStatus == 1 ||
                  item.transStatus == 2 ||
                  item.transStatus == 3
                "
              >
                查看
              </button>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view v-else class="loadingClass"> 暂无数据 </view>
    <view class="myloginandaplication">
      <l-popup :radius="20" :show="popupShow">
        <view class="width60vw">
          <view style="margin-left: 20rpx; margin-top: 20rpx">{{
            `确定要${
              currentDate.transStatus == 1
                ? "撤销申请"
                : currentDate.transStatus == 4
                ? "删除"
                : ""
            }吗？`
          }}</view>
          <view class="classBtn">
            <button
              class="commonBtnClass width150rpx mgright20rpx"
              :disabled="memberStore.boleanDisabled"
              :loading="memberStore.boleanDisabled"
              @click="handledeleteOrRevoke"
            >
              确定
            </button>
            <button class="cancelClass width150rpx" @click="popupShow = false">
              取消
            </button>
          </view>
        </view>
      </l-popup>
    </view>
  </view>
</template>

<script setup>
import {
  select_by_apply_user,
  wfTypeFindPage,
  select_register_by_ids,
  terminate_trans_apply,
  wfTransApplyDelete,
  select_depts_by_deptIds,
} from "./index";
import { useMemberStore } from "@/stores/modules/member";
import { parseTime } from "@/utils";
const current = ref(0);
const items = ref(["申请", "流转中", "已结束", "已撤销"]);
const styleType = ref("button");
const activeColor = ref("#007aff");
const memberStore = useMemberStore();
const popupShow = ref(false);
const currentDate = ref({});
const state = reactive({
  columns: [
    { name: "wfTypeName", title: "危废行业俗称", fixed: true },
    { name: "plan_TransTime", title: "转运日期" },
    { name: "wfTransWeight", title: "产出量" },
    { name: "wfUnit", title: "单位" },
    { name: "transTo", title: "去向" },
    { name: "userName", title: "申请人" },
    { name: "name", title: "所属部门" },
    { name: "transStatus", title: "审批状态" },
  ],
  rows: [],
});
const allLists = async () => {
  let res = null;
  try {
    res = await select_by_apply_user(memberStore.userId);
  } catch (err) {
    res = await select_by_apply_user(memberStore.userId);
  }
  state.rows = JSON.parse(JSON.stringify(res.data));
  const ids = state.rows.length && state.rows[0].wfIds;
  let wfUnit = "";
  if (ids) {
    const res = await select_register_by_ids(ids);
    wfUnit = (res.data.length && res.data[0].wfUnit) || "";
  }

  const applyDeptIds = state.rows.map((item) => item.applyDeptId);
  const depIds = [...new Set(applyDeptIds)].join();
  const promise = await select_depts_by_deptIds(depIds);
  const ress = await wfTypeFindPage();
  state.rows.forEach((item) => {
    item.plan_TransTime = parseTime(item.planTransTime, "{y}-{m}-{d}");
    item.userName = memberStore.userName;
    item.wfUnit = wfUnit;
    //获取危废行业俗称
    if (item.wfType) {
      const typeLists = item.wfType.split(",");
      const TypeNames = [];
      typeLists.forEach((wfType) => {
        const obj1 = ress.data.find((item) => item.id == wfType);
        if (obj1) {
          TypeNames.push(obj1.wfTypeName);
        }
      });
      item.wfTypeName = TypeNames.join(",");
    }
    //获取危废行业俗称
    const res2 = promise.data.find((res) => res.deptId == item.applyDeptId);
    if (res2) {
      item.deptName = res2.name;
    }
    const Weights = item.wfTransWeight ? JSON.parse(item.wfTransWeight) : [];
    item.wfTrans_Weight = Weights.length
      ? Weights.reduce((pre, next) => {
          if (next.wfWeight) {
            pre += +next.wfWeight;
          }
          return pre;
        }, 0)
      : "";
  });
  state.rows.reverse();
};
onShow(() => {
  allLists();
});
const compStatus = computed(() => {
  return (transStatus) =>
    transStatus == 1
      ? "审批中"
      : transStatus == 2
      ? "已审批"
      : transStatus == 3
      ? "已撤销"
      : transStatus == 4
      ? "信息暂存"
      : "";
});
const computedRows = computed(() => {
  if (current.value == 0) {
    return state.rows.filter((item) => item.transStatus == 4);
  } else if (current.value == 1) {
    return state.rows.filter((item) => item.transStatus == 1);
  } else if (current.value == 2) {
    return state.rows.filter((item) => item.transStatus == 2);
  } else if (current.value == 3) {
    return state.rows.filter((item) => item.transStatus == 3);
  }
});
const handleClick = (item) => {
  memberStore.ApplyViewing = JSON.parse(JSON.stringify(item));
  uni.navigateTo({
    url: `/pages/ApplicationDetails/ApplicationDetails?transStatus=${item.transStatus}`,
  });
};
const onClickItem = (e) => {
  if (current.value !== e.currentIndex) {
    current.value = e.currentIndex;
  }
};
//撤销申请
const handleRevokeOrDel = (item) => {
  popupShow.value = true;
  currentDate.value = item;
};
//撤销申请或删除
const handledeleteOrRevoke = async () => {
  try {
    memberStore.boleanDisabled = true;
    if (currentDate.value.transStatus == 1) {
      await terminate_trans_apply(
        currentDate.value.workitemId,
        currentDate.value.applyId
      );
      uni.showToast({ icon: "success", title: "撤销申请成功" });
    } else if (currentDate.value.transStatus == 4) {
      await wfTransApplyDelete(currentDate.value.applyId);
      uni.showToast({ icon: "success", title: "删除成功" });
    }
    popupShow.value = false;
    allLists();
  } finally {
    memberStore.boleanDisabled = false;
  }
};
const handleshenqing = () => {
  uni.navigateTo({
    url: "/pages/TransitApplication/TransitApplication?from=TransitApplication",
  });
};
</script>

<style lang="scss" scoped>
</style>